<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <!--         
        keydown：按键按下触发
        keyup：按键抬起触发  
        1、Vue中常用的案件别名
        @keyup.enter:别名，绑定回车
        回车：enter
        删除：delete（删除、退格键）
        退出：esc
        空格：space
        换行：tab （特殊：使用keydown）
        上：up
        下：down
        左：left
        右：right       
        3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
            （1）.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
            （2）. 配合keydown使用，正常触发事件   
    -->
    <div id="root">

        <h2>学校名称：{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#root',
            data: {
                name: '北大'
            },
            methods: {
                // 所有被vue管理的函数，尽量都是用普通函数方式，尽量不要使用 ‘=>’showInfo(event) =>{},
                showInfo(e) {
                    console.log(e.key, e.keyCode)
                    // console.log(e)
                    //if (e.keyCode === 13) {
                    console.log(e.target.value)
                    //}
                }
            }
        })
    </script>
</body>

</html>